<template>
  <div class="page">
    <HeaderBar></HeaderBar>
    <div class="top">
      <div style="position:relative;">
        <el-image :src="src"></el-image>
        <div class="head">
          <!--头像-->
          <div class="face">
            <el-avatar :size="70" :src="url">
              <el-avatar icon="el-icon-user-solid" :size="70"></el-avatar>
            </el-avatar>
          </div>
          <!--昵称和个签-->
          <span class="font-name">{{userInfo.Name}}</span>
          <span class="font-sign">{{userInfo.Sign}}</span>
          <!--私信-->
          <el-button v-if="myInfo" type="info" size="small" @click="sendMsg" class="msg-btn">私信</el-button>
          <!--关注按钮-->
          <div>
            <el-button v-if="!myInfo" class="fol-btn" type="warning" size="small" disabled>未登录</el-button>
            <el-button v-else-if="isAttention" class="fol-btn" type="success" size="small" @click="togAtt">已关注</el-button>
            <el-button v-else class="fol-btn" type="danger" size="small" @click="togAtt">关注</el-button>
          </div>
        </div>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
          <span>Ta的作品</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span>关注</span>
          <span>{{followingCount}}</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span>粉丝</span>
          <span>{{followerCount}}</span>
        </el-menu-item>
      </el-menu>
      <div>
        <router-view></router-view>
      </div>
    </div>
    <el-footer class="footer">
      <p>Hi!弹幕 - 2021</p>
    </el-footer>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import HeaderBar from "@/components/HeaderBar";
import { imgUrl, faceUrl } from "@/utils/url";
import { getFollowCount,getIsFollow,follow,unsubscribe,} from "@/api/relations";
import { getUserInfoById } from "@/api/user";
export default {
  data() {
    return {
      uid: 0,
      activeIndex: "1",
      isFollow: false,
      src: imgUrl + "background.webp",
      url: "",
      followingCount: 0,
      followerCount: 0,
      userInfo: {
        Name: "",
        Sign: "",
      },
      formId: {
        id: 0,
      },
    };
  },
  methods: {
    _getIsFollow() {
      //获取关注信息
      getIsFollow(this.myInfo.Uid, this.uid).then((res) => {
        if (res.data.code === 200) {
          this.isFollow = true;
        }
      });
    },
    _getUserInfoById() {
      getUserInfoById(this.uid).then((res) => {
        if (res.data.code === 200) {
          if(res.data.data.user.Uid == 0){
            this.$router.push({ name: "404" });
          }
          this.userInfo.Name = res.data.data.user.Name;
          this.userInfo.Sign = res.data.data.user.Sign;
          this.url = faceUrl + res.data.data.user.Face;
        }
      });
    },
    _getFollowCount() {
      getFollowCount(this.uid).then((res) => {
        this.followingCount = res.data.data.following_count;
        this.followerCount = res.data.data.follower_count;
      });
    },
    handleSelect(key) {
      switch (key) {
        case "1":
          this.$router.push({ name: "userVideo", params: { uid: this.uid } });
          break;
        case "2":
          this.$router.push({ name: "userFollowing", params: { uid: this.uid }, });
          break;
        case "3":
          this.$router.push({ name: "userFollower", params: { uid: this.uid }, });
          break;
      }
    },
    togAtt() {
      if (this.isFollow === false) {
        //关注
        this.formId.id = Number(this.uid);
        follow(this.formId).then((res) => {
          if (res.data.code === 200) {
            this.isFollow = true;
            this.$message.success("关注成功");
          }
        }).catch((err) => {
          this.$message.error(err.response.data.msg);
        });
      } else {
        //取关
        this.formId.id = Number(this.uid);
        this.$confirm("是否取消关注?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          unsubscribe(this.formId).then((res) => {
            if (res.data.code === 200) {
              this.isFollow = false;
              this.$message.success("取消关注");
            }
          }).catch((err) => {
            this.$message.error(err.response.data.msg);
          });
        });
      }
    },
    //发私信
    sendMsg() {
      this.$router.push({ name: "userMsg", params: { fid: this.uid } });
    },
  },
  created() {
    this.uid = this.$route.params.uid;
    this._getUserInfoById();
    this._getFollowCount();
    this._getIsFollow();
  },
  computed: {
    isAttention() {
      return this.isFollow;
    },
    myInfo() {
      if (Cookies.get('userInfo')) {
        return JSON.parse(Cookies.get('userInfo'));
      } else {
        return null;
      }
    },
  },
  components: {
    HeaderBar,
  },
};
</script>

<style>
.page{
  background-color: #e9e9e9;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.msg-btn {
  position: absolute;
  margin-left: 1100px;
  margin-top: -60px;
}

.fol-btn {
  position: absolute;
  float: right;
  margin-left: 1180px;
  margin-top: -60px;
}

.footer{
  height: 10px;
  background-color: #2d8cf0;
}

.footer>p{
  text-align: center;
  color: #fff;
  font-size: 20px;
}
</style>